<template>
	<view class="top-bar">
		请假人数14人
	</view>
	<view class="background">
		
		<view class="card_container" v-for="(item, index) in student">
			
			<uni-card class="semester_card">
			    <image src="../../static/rili.png" style="width: 16px; height: 16px;"
		    	class="semester_img"></image>   
		    	<view class="semester_date">{{item.date}}</view><br>
			    <view class="description">异常说明关键词</view>
		    	<view class="description2" style="color: darkred;">#{{item.description}}#</view>
				<view class="dashed-text"></view>
            </uni-card>			
								
		</view>
		
	</view>
</template>

<script setup>
	
	import { ref } from 'vue';
	
	const student = ref(
	    [{
			date:20240909,
			description:"着急出校"
	    },
		{
           date: 20240910,
           description: "身体不适就医"
       },
       {
           date: 20240911,
           description: "参加校外竞赛"
       },
       {
           date: 20240912,
           description: "家庭突发情况"
       },
       {
           date: 20240913,
           description: "图书馆查资料"
       },
       {
           date: 20240914,
           description: "与导师外出调研"
       },
       {
           date: 20240915,
           description: "参加学术讲座"
       },
       {
           date: 20240916,
           description: "补办证件"
       },
       {
           date: 20240917,
           description: "社团活动"
       },
       {
           date: 20240918,
           description: "参加志愿者活动"
       }
   ]);		
	
</script>

<style>
	.top-bar{
		display: flex;
		height: 42px;
		width: 100vw;
		background-color: #FFE0C7;
		
		justify-content: center;
		align-items: center;
		
		font-weight: 400;
		font-size: 12px;
		
	}
	
	.background{
		position: absolute;
		width: 100vw;
		height: 100vh;
		background: #F3F5F9;
	}  
	
	.dashed-text {
	  border-bottom: 2px dashed #ccc;
	}
	
	.uni-card>view{
		padding: 10px;
	}
	
	.uni-card{
		padding: auto;
		margin-top:12px;
	}
	
	.semester_date{
		text-indent: 8px;
	}
	
	.description,.description2{
		display: inline-block;
	}
	
	.semester_img,.semester_date{
		display: inline-block;
	}
		   
</style>
